// 由于webpack是基于Node进行构建的，所有webpack的配置文件中，任何合法的Node代码都支持
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')


module.exports={
  mode: 'development', //development/production不加这行老是报警告：The 'mode' option has not been set...
  entry: path.join(__dirname, './src/index.js'), //项目入口文件
  output: {
    path: path.join(__dirname, './dist'), //项目输出文件
    filename: 'bundle.js'
  },
  module:{
    rules:[
      { test : /\.css$/, use: ['style-loader','css-loader'] },
	  { test: /\.less$/, use: ['style-loader','css-loader', 'less-loader'] },//配置处理.less文件的第三方loader规则
      { test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']}, //配置处理.scss文件的第三方loader规则
      { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=9257&name=[hash:8]-[name].[ext]' },
      // limit 是图片的大小，单位是byte，该值如果大于图片的本身大小，则会被转为base64格式，反之不会
      // name=[hash:8]-[name].[ext]表示 以hash值的32位中前8位，[name]表示使用图片的本身文件名，[ext]使用文件本身扩展名
      { test: /\.(ttf|eof|svg|woff|woff2)$/, use: 'url-loader'}, //处理字体文件的loader
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //配置Babel来转换高级的ES语法
      { test: /\.vue$/, use: 'vue-loader' } //这是处理.vue的loader
    ]
  },
  plugins:[
    new VueLoaderPlugin()
  ],
  resolve:{
    alias:{
      // "vue$": "vue/dist/vue.js"
    }
  }
}
